
### Class Architecture

| Type      | Class Name                   | Description                                                                         |
| --------- | ---------------------------- | ----------------------------------------------------------------------------------- |
| ==Block== | `.as-layout`                 | Main container for the layout.                                                      |
| Element   | `__affix-class`              | Applied when the element (usually the navbar) becomes "sticky" or fixed to the top. |
| Element   | `__header`                   | The global site header.                                                             |
| Modifier  | `__header--invisible`        | Hides the header (likely used for transition states).                               |
| Element   | `__brand-section`            | The top section of the header containing logos/socials.                             |
| Element   | `__brand-container`          | Inner container for the branding section.                                           |
| Element   | `__brand-wrapper`            | Flex container for brand items.                                                     |
| Element   | `__brand-item`               | Individual units within the brand wrapper (Logo, Social, Search).                   |
| Modifier  | `__brand-item--filler`       | Pushes subsequent items to the right using `margin-left: auto`.                     |
| Modifier  | `__brand-item--logo`         | Specific sizing for the brand logo.                                                 |
| Modifier  | `__brand-item--social-links` | Styling for social media icon groups in the header.                                 |
| Element   | `__navbar`                   | The primary navigation bar (often fixed on mobile).                                 |
| Element   | `__navbar-item`              | Standard list items within the navigation menu.                                     |
| Element   | `__tool-item`                | UI utility items (Login, Search, Language) specifically for the navbar.             |
| Element   | `__main-container`           | The outer wrapper for the main content area.                                        |
| Element   | `__main`                     | The specific `<main>` content container.                                            |
| Element   | `__footer`                   | The global site footer.                                                             |
| Element   | `__footer-col`               | Column containers within the footer grid.                                           |
| Modifier  | `__footer-col--social-links` | Centers or aligns social icons in the footer based on breakpoint.                   |
| Element   | `__footer-container`         | Flex rows for footer details like Address or Email.                                 |


### Implementation Reference

##### Generated HTML

```html
<header class="as-layout__header">  
	<div class="as-layout__brand-section">  
		<div class="as-layout__brand-container container">  
			<div class="as-layout__brand-wrapper">  
				<div class="as-layout__brand-item as-layout__brand-item--logo">  
					<a href="...">  
						<img src="..." alt="customer"/>  
					</a>  
				</div>
				<div class="as-layout__brand-item as-layout__brand-item--filler"></div>  
				<div class="as-layout__brand-item as-layout__brand-item--search">  
					...
				</div>
				<div class="as-layout__brand-item as-layout__brand-item--social-links">  
					...
				</div>
				<div class="as-layout__brand-item as-layout__brand-item--language-select">  
					...
				</div>
				<div class="as-layout__brand-item as-layout__brand-item--shop-cart">  
					...
				</div>
				<div class="as-layout__brand-item as-layout__brand-item--login">  
					<a href="..." class="nav-link">  
						<i class="fa-regular fa-user"></i>  
					</a>  
				</div>
			</div>  
		</div>
	</div>  
	<nav id="as-affix-element" class="as-layout__navbar navbar navbar-expand-lg">  
		<div class="as-layout__navbar-container container">  
			<a href="..." class="as-layout__navbar-brand navbar-brand">  
				...
			</a>
			<button class="as-layout__navbar-toggler navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#as-main-navigation">  
				<i class="fa-solid fa-bars"></i>  
			</button>
			<div class="as-layout__navbar-collapse collapse navbar-collapse" id="as-main-navigation">  
				<ul class="as-layout__navbar-nav navbar-nav">  
						<li class="as-layout__navbar-item as-layout__navbar-item--login nav-item">  
							<a href="..." class="nav-link">  
								<i class="fa-regular fa-user"></i>  
								<span>Login</span>  
							</a>  
						</li>
						<li class="as-layout__navbar-item as-layout__navbar-item--search">  
							...
						</li>
				</ul>  
			</div>
		</div>
	</nav>
</header>
  
<div class="as-layout__main-container">  
    <main class="as-layout__main">  
        ... Body goes here ...
    </main>  
</div>  
  
<footer class="as-layout__footer">  
	<div class="as-layout__footer-container container">  
		<div class="as-layout__footer-row row">  
			<div class="as-layout__footer-col as-layout__footer-col--copyright col-lg-3 col-sm-6">  
				<div class="as-layout__footer-content">  
					<div class="as-layout__footer-brand">  
						<a href="..." class="as-layout__footer-brand-link">  
							<img class="as-layout__footer-brand-logo as-layout__footer-brand-logo--web"  
								 src="..."/>  
							<img class="as-layout__footer-brand-logo as-layout__footer-brand-logo--print"  
								 src="..."/>  
						</a>
					</div>
					<small class="as-layout__footer-copyright m-0">
						Copyright © 2026<br>  
						Customer
					</small>
				</div>
			</div>
			<div class="as-layout__footer-col as-layout__footer-col--contact col-lg-3 col-sm-6">  
				<h4 class="as-layout__footer-title">  
					Address
				</h4>  
				<div class="as-layout__footer-content">  
					<div class="as-layout__footer-content-row as-layout__footer-content-row--address">  
						...
					</div>
				 </div>
			 </div>
			 <div class="as-layout__footer-col as-layout__footer-col--links col-lg-3 col-sm-6">  
				<h4 class="as-layout__footer-title">
					Links
				</h4>  
				<div class="as-layout__footer-content">  
					...
				</div>  
			</div>  
			<div class="as-layout__footer-col as-layout__footer-col--social-links col-lg-3 col-sm-6">  
				<h4 class="as-layout__footer-title">  
					Social Links
				</h4>  
				<div class="as-layout__footer-content">  
					... social links
				</div>
			</div>  
		</div>
	</div>
</footer>
  
```

##### SCSS

```scss
.as-layout {
  // Global Modifiers
  &__header--invisible,
  &__main--invisible,
  &__footer--invisible {
    visibility: hidden;
  }

  // Structural Elements
  &__main-container {
    flex-shrink: 1;
  }

  &__footer {
    margin-top: auto;
    background-color: var(--bs-light);
    // ...
  }
}
```

